<!--  frame 积分记录 -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
  <meta name="divport" content="width=device-width,initial-scale=1,user-scalable=no" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
	<title>积分记录</title>
	<link rel="stylesheet" href="../plugin/hhframe/hhframe.min.css" />
	<link rel="stylesheet" href="../style/index.css"/>

	<style>

	body {
	  /*background-color:#F8F8F8;*/
	}
	/* pages/member_jifen/member_jifen.wxss */

	.header1 {
	  position: relative;
	  height: 3.20rem;
	  padding: 0 .30rem;
	  background: #ff502d;
	}

	.sum_jifen {
	  height: .70rem;
	  line-height: .70rem;
	  font-size: .70rem;
	  color: #fff;
	  font-weight: bold;
	  padding-top: .30rem;
	}

	.use {
	  position: absolute;
	  right: .30rem;
	  top: .35rem;
	  width: 1.46rem;
	  height: .46rem;
	  line-height: .46rem;
	  text-align: center;
	  font-size: .28rem;
	  color: #fff;
	  background: rgba(0, 0, 0, 0.2);
	  border-radius: .23rem;
	}

	.jifen_bills {
	  position: absolute;
	  left: .30rem;
	  top: 1.30rem;
	  width: 6.30rem;
	  background: #fff;
	  border-radius: .10rem;
	  padding: 0 .30rem;
	  margin-bottom: .20rem;
	}

	.bills_title {
	  height: 1.00rem;
	  line-height: 1.00rem;
	  font-size: .30rem;
	  color: #666;
	}

	.jifen_item {
	  position: relative;
	  height: 1.50rem;
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  border-top: 1px solid #eee;
	}

	.jifen_type {
	  height: .30rem;
	  line-height: .30rem;
	  font-size: .30rem;
	  color: #666;
	  margin-bottom: .20rem;
	}

	.jifen_num {
	  position: absolute;
	  right: 0;
	  top: .40rem;
	  font-size: .30rem;
	}

	.add_color {
	  color: #ff502d;
	}

	.reduce_color {
	  color: #31cb43;
	}

	.create_time {
	  height: .28rem;
	  line-height: .28rem;
	  font-size: .28rem;
	  color: #999;
	}

	</style>
</head>
<body>
	<div class="content app" v-cloak>
			<div class="header1">
			  <div class="sum_jifen">{{sumIntegral}}</div>
			  <div class="use" @click="coupon">去使用</div>
			</div>

			<div class="jifen_bills">
			  <div class="bills_title">积分账单</div>
			  <div class="jifen_item" v-for="(item, index) in lists" :key="index">
			    <div class="jifen_type">{{item.integral_reason}}</div>
			    <div :class="item.integral_type==1?'add_color jifen_num':'reduce_color jifen_num'">{{item.integral_type==1?'+':'-'}}{{item.integral_quantity}}</div>
			    <div class="create_time">{{item.create_time}}</div>
			  </div>
			<div v-if="lastPage" style="color: #999;font-size: .24rem;text-align: center;padding: .40rem;">已全部加载</div>
			</div>

	</div>
</body>
<script src="../plugin/jquery.js"></script>
<script src="../plugin/vue.all.js"></script>
<script src="../plugin/hhframe/hhframe.min.js"></script>
<script src="../plugin/public.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
window.addEventListener("apiready",function(){
	index()
});

function index()
{
	var vm = new Vue({
		el: ".app",
		data: {
			 lastPage:false,
			 page:1,
			 size:9999,
			 lists:[],
			 sumIntegral:0,
			 isbz:false
		},
		mounted: function(){
				this.getData()
				this.getuser()
				// 监听页面打开
				api.addEventListener({
				    name: 'viewappear'
				}, function(ret, err) {
					if(vm.isbz){
						vm.getData(false)
						vm.getuser(false)
					}
				});
				this.isbz = true
		},
		methods: {
			//获取数据
						getData: function (loader){
							let param = {
								page: this.page,
					      size: this.size,
							}
							AjaxSafe({
						   		url:"/xapp/user/integralList",
						    	data:param,
						    	loader:loader,
								success: function(res) {
									  vm.lastPage = res.lastPage
								    vm.lists = res.list

								},
								failed: function(err){
										alert("网络故障！");
								}
							});
						},
						//获取积分
						getuser: function (loader){
							AjaxSafe({
						   		url:"/xapp/user",
						    	loader:loader,
								success: function(res) {
									  vm.sumIntegral = res.sum_integral
								},
								failed: function(err){
										alert("网络故障！");
								}
							});
						},
		},

	});
}

</script>
</html>
